<template>
  <div class="left-nav">
    <div class="home-div">
      <router-link to="/">
        <i class="el-icon-s-home home-btn"> 首 页</i>
      </router-link>
    </div>
    <el-tree class="left-theme" accordion :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>

import {list2tree} from '@/utils/common'

export default {
  name: 'LeftNav',
  data(){
    return{
      data: [],
      normalData:[
          // 多级目录
        {id:1,label:'用户管理',parentId: 0,link: null},
        {id:2,label:'系统管理',parentId: 0,link: null},
        {id:3,label:'学生管理',parentId: 1,link: null},
        {id:4,label:'学生列表',parentId: 3,link: '/user/list'},
        {id:5,label:'学生操作记录',parentId: 3,link: '/user/history'},
        {id:6,label:'系统配置',parentId: 2,link: '/about'},
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        link: 'link'
      }
    }
  },
  mounted() {
    this.data = list2tree(this.normalData)
  },
  methods: {
    handleNodeClick(data) {
      // 实现页面跳转
      if (data.link != null){
        this.$router.push(data.link)
      }
    },

  }
}
</script>

<style scoped>
.home-div{
  color: #FFFFFF;
  line-height: 40px;
  text-align: center;
}
::v-deep .el-tree-node__content{
  background: #161711 !important;
  width: 100%;
  color: #FFFFFF;
  height: 40px;
  line-height: 40px;
}
::v-deep .el-tree-node__content :hover{
  height: 40px;
  line-height: 40px;
}
.home-btn{
  color: #FFFFFF;
}
</style>
